<style lang="less">
    .van-sku-container{
        .van-sku__stepper{
            input{
                font: caption!important
            }
        }
    }
</style>

<template>
    <!--规格弹层-->
    <van-popup v-model="visible" class="van-sku-container" position="bottom">
        <div class="van-hairline--bottom van-sku-header">
            <div class="van-sku-header__img-wrap">
                <img :src="url">
            </div>
            <div class="van-sku-header__goods-info">
                <div class="van-sku__goods-name van-ellipsis">{{title}}</div>
                <div class="van-sku__goods-price">
                    <span class="van-sku__price-symbol">￥</span>
                    <span class="van-sku__price-num">{{item.price}}</span>
                </div>
                <i class="van-sku__close-icon van-icon van-icon-close" @click="visible = false"></i>
            </div>
        </div>
        <div class="van-sku-body" style="max-height: 380px;">
            <div class="van-sku-group-container van-hairline--bottom">
                <div class="van-sku-row" v-for="(spec,key) in newspecs" :key="key">
                    <div class="van-sku-row__title">{{key}}：</div>
                    <span
                    :class="'van-sku-row__item ' + (item.spec_data[key] == specvalue ? 'van-sku-row__item--active' : '')"
                    v-for="specvalue in spec"
                    :key="key+specvalue"
                    @click="changespec(key,specvalue)">
                        {{specvalue}}
                    </span>
                    <!-- <span class="van-sku-row__item van-sku-row__item--active">天蓝色</span> -->
                </div>
            </div>
            <div class="van-sku-stepper-stock">
                <div class="van-sku-stepper-container">
                    <div class="van-sku__stepper-title">购买数量：</div>
                    <van-stepper class="van-sku__stepper" v-model="mycount" disable-input integer :min="0" :max="stock"/>
                </div>
                <div class="van-sku__stock">剩余{{stock}}件</div>
                <!-- <div class="van-sku__quota">每人限购15件</div> -->
            </div>
        </div>
        <div class="van-sku-actions">
            <button @click="$emit('oncar')" class="van-button van-button--default van-button--normal van-button--bottom-action">
                <span class="van-button__text">加入购物车</span>
            </button>
            <button @click="$emit('onbuy')" class="van-button van-button--primary van-button--normal van-button--bottom-action">
                <span class="van-button__text">立即购买</span>
            </button>
        </div>
    </van-popup>
</template>

<script>
export default {
    name: "itemspecspop",
    components : {

    },
    model : {
        event : 'change',
        prop : 'itemid'
    },
    props : {
        showpop : {
            type : Boolean,
            default : false
        },
        itemid : {
            type : [String,Number],
            default : 0,
        },
        item : {
            type : Object,
            default : {}
        },
        count : {
            type : Number,
            default : 0
        }
    },
	data () {
		return {
			mycount : this.count
		}
	},
	methods:{
		changespec(key,value){
            this.item.spec_data[key] = value;
            let newspec = Object.values(this.item.specs).filter(f => {
                for (let key in this.item.spec_data) {
                    if(f.spec[key] != this.item.spec_data[key]) return false;
                }
                return true;
            })
            if(newspec[0].stock.length){
                this.$emit('change',newspec[0].stock[0].item_id)
                if(!this.mycount){
                    this.$emit('update:count',1);
                    this.mycount = 1;
                }
            }else{
                this.$emit('change',0)
                this.$emit('update:count',0);
                this.mycount = 0;
            }
        }
	},
	computed: {
        newspecs(){
            let a = {};
            Object.values(this.item.specs).map(m => {
                for (const key in m.spec) {
                    if(a[key]){
                        if(a[key].findIndex(f => f == m.spec[key]) == -1){
                            a[key].push(m.spec[key])
                        }
                    }else{
                        a[key] = [m.spec[key]];
                    }
                }
            })
            return a;
        },
        stock(){
            if(!this.item.specs) return '';
            if(!this.itemid) return 0;
            let stock = this.item.specs[this.itemid].stock;
            return stock.length ? stock[0].real_num - stock[0].lock_num : 0;
        },
        title (){
            if(!this.item.specs) return '';
            return this.item.goods.title + ' ' + Object.values(this.item.spec_data).join(' ')
        },
        url(){
          if(!this.item) return '';
          if(this.item.goods.images != ''){
            return this.$http.IMGURL + this.item.goods.images;
          }else if(this.item.images != ''){
            return this.$http.IMGURL + this.item.images;
          }else{
            return 'http://res2.esf.leju.com/esf_www/statics/images/default-img/detail.png';
          }
        },
        visible : {
            get (){
                return this.showpop;
            },
            set (value){
                this.$emit('update:showpop',value);
            }
        }
	},
	mounted(){

	},
	created(){

    },
    watch : {
        mycount(value){
            this.$emit('update:count',value);
        }
    }
}
</script>

<style lang="less">

</style>
